<template>
    <view class="coupon_item">
        <view class="coupon_main">
            <view class="coupon_item_left">
                <view class="quota">
                    <view class="num" :style="{ 'font-size': priceFontSize ? priceFontSize + 'px' : '' }">{{
                        floatDivide(Data.couponDiscount, 100)
                    }}</view>
                    <view class="unit" v-if="Data.couponType === 1">元</view>
                    <view class="unit" v-if="Data.couponType === 2">折</view>
                </view>
                <view class="condition"> {{ conditionContent }} </view>
            </view>
            <view class="coupon_item_middle">
                <view class="title">{{ Data.couponTitle }}</view>
                <view class="time" v-if="Data.couponTimeType === 1 && Data.couponTimeStart">
                    有效期 {{ Data.couponTimeStart }}-{{ Data.couponTimeEnd }}
                </view>
                <view class="time" v-if="Data.couponTimeType === 2">
                    领券后当天有效，{{ Data.couponTimeValue }}天内可用
                </view>
                <view class="time" v-if="Data.couponTimeType === 3">
                    领券次日生效，{{ Data.couponTimeValue }}天内可用
                </view>
            </view>
        </view>
        <view class="coupon_item_right">
            <slot name="right"></slot>
        </view>
    </view>
</template>
<script setup>
import { computed, watch, ref, onMounted } from 'vue';
import { floatDivide } from '@/commons/utils.js';
import storage from '@/commons/storage';
const props = defineProps({
    Data: {
        default: () => {
            return {
                // 优惠券类型
                couponType: null,
                // 优惠数额
                couponDiscount: null,
                // 优惠券标题
                couponTitle: null,
                // 优惠券有效期
                couponTimeStart: null,
                couponTimeEnd: null,
                couponTimeValue: '',
                // 优惠券使用范围
                couponMatch: null,
                // 优惠券使用门槛
                couponPrerequisites: null,
                couponPrerequisitesAdditional: null
            };
        },
        type: Object
    }
});

const conditionContent = computed(() => {
    switch (props.Data.couponPrerequisites) {
        case 1:
            return '无门槛';
        case 2:
            return `满${floatDivide(props.Data.couponPrerequisitesAdditional, 100)}可用`;
        case 3:
            return `满${props.Data.couponPrerequisitesAdditional}件可用`;
        default:
            return '';
    }
});

const priceFontSize = ref(0);
const compareDescLength = value => {
    // 可通纳宽度，单位：rpx
    const middleContentwidth = 161 - 25;
    const needNum = String(floatDivide(value, 100)).length;
    if (needNum > 4) {
        //  3个数字约占2个汉字大小，小数点当一个数字算
        const autosize = Math.floor(middleContentwidth / needNum) * 1.5;
        priceFontSize.value = autosize / storage.get('pixelRatio');
    }
};

const checkDescLength = value => {
    if (storage.get('pixelRatio')) {
        compareDescLength(value);
    } else {
        uni.getSystemInfo({
            success: res => {
                // 得到页面可用高度rpx
                const scale = 750 / res.windowWidth;
                storage.set('pixelRatio', scale);
                compareDescLength(value);
            }
        });
    }
};
watch(
    () => props.Data,
    value => {
        checkDescLength(value.couponDiscount);
    },
    { immediate: true, deep: true }
);

onMounted(() => {});
</script>
<style lang="scss" scoped>
.span {
    display: contents;
}
.coupon_item {
    height: 167rpx;
    background: #ffeded;
    border-radius: 14rpx;
    border: 2rpx solid #ffa5a6;
    margin-bottom: 29rpx;

    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 29rpx 0rpx 29rpx 0rpx;
    position: relative;
    .coupon_main {
        display: flex;
        align-items: center;
        height: 100%;
    }
    .coupon_item_left {
        width: 161rpx;
        max-width: 161rpx;
        font-size: 25rpx;
        padding: 0 1rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fe292b;
        line-height: 25rpx;
        text-align: center;
        .quota {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .num {
                font-size: 51rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #fe292b;
                line-height: 51rpx;
                display: inline-block;
            }
            .unit {
                display: inline-block;
            }
        }
        .condition {
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #fe292b;
            line-height: 25rpx;
            margin-top: 14rpx;
            word-break: break-all;
        }
    }
    .coupon_item_middle {
        line-height: 25rpx;
        font-size: 22rpx;
        color: #fe292b;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        .title {
            font-size: 29rpx;
            margin-top: 18rpx;
        }
        .time {
            margin-bottom: 14rpx;
        }
    }

    .coupon_item_right {
        font-size: 14px;
        min-width: 10rpx;
        height: 100%;
    }
}
</style>
